<template>
    <div id="kh_list_" class="container-fluid padding">
        <div>
            <el-form ref="searchDatas"  :inline="true" :model="searchDatas" label-position="right" label-width="110px" class="padding" >
                <el-form-item label="客户名称" prop="khmc">
                    <el-input v-model="searchDatas.khmc" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="客户号码" prop="ldhm">
                    <el-input v-model="searchDatas.ldhm" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="质询产品" prop="zxcp">
                    <el-input v-model="searchDatas.zxcp" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="媒体来源" prop="mtly">
                    <el-input v-model="searchDatas.mtly" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="找人原因" prop="zryy">
                    <el-select v-model="searchDatas.zryy" placeholder="请选择" style="width:300px">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['找人原因']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄段" prop="nld">
                    <el-select v-model="searchDatas.nld" placeholder="请选择" style="width:300px">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['年龄段']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="khxb">
                    <div style="width:300px">
                        <el-radio class="radio" v-model="searchDatas.khxb" label="1" >男</el-radio>
                        <el-radio class="radio" v-model="searchDatas.khxb" label="2">女</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="职  业" prop="zy">
                    <el-select v-model="searchDatas.zy" style="width:300px" placeholder="请选择">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['职  业']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="省份/城市/区县" prop="sfcsqx">
                    <el-cascader
                            style="width:300px"
                            v-model="searchDatas.sfcsqx"
                            :change-on-select="changeOnSelect"
                            :options="selectArea">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="沟通内容" prop="gtnr">
                    <el-input v-model="searchDatas.gtnr" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="归属员" prop="ygmc">
                    <el-input v-model="searchDatas.ygmc" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="归属员工号" prop="yggh">
                    <el-input v-model="searchDatas.yggh" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" prop="xxdz">
                    <el-input v-model="searchDatas.xxdz" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="客户质量" prop="khzl">
                    <el-select v-model="searchDatas.khzl" style="width:300px" placeholder="请选择">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['客户质量']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户来源" prop="khly">
                    <el-select v-model="searchDatas.khly" style="width:300px" placeholder="请选择">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['客户来源']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户需求" prop="khxq">
                    <el-select v-model="searchDatas.khxq" style="width:300px" placeholder="请选择">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['客户需求']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="会员级别" prop="hydj">
                    <el-select v-model="searchDatas.hydj" style="width:300px" placeholder="请选择">
                        <el-option label="" value=""></el-option>
                        <el-option
                                v-for="item in datas['会员级别']['children']"
                                :key="item.id"
                                :label="item.text"
                                :value="item.text">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="待回访时间">
                    <el-date-picker
                            style="width:300px"
                            v-model="searchDatas.dhfsj"
                            type="datetime"
                            placeholder="选择日期时间"
                            align="right"
                            value-format="timestamp"
                            :picker-options="dhfsjOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="客户备注" prop="khbz">
                    <el-input v-model="searchDatas.khbz" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search()">查询</el-button>
                    <el-button type="warning" @click="$refs['searchDatas'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
            <table class="layui-hide padding" id="khList"  lay-filter="khList"></table>
        </div>
    </div>
</template>

<script>
    import selectArea_ from '../../../../common/js/select_area.js'
    import {formatDateTime} from '@/common/js/util.js'
    import {getSfcsqx} from '@/common/js/my.js'
    export default {
        name: "khList",
        data: function () {
            return {
                changeOnSelect:true,
                selectArea:selectArea_,
                datas:{//字典查找
                    '找人原因':{children:[]},
                    '职  业':{children:[]},
                    '客户质量':{children:[]},
                    '年龄段':{children:[]},
                    '客户来源':{children:[]},
                    '客户需求':{children:[]},
                    '会员级别':{children:[]},
                },
                searchDatas:{
                    id:"",
                    ldhm:"",
                    mtly:"",
                    bjhm:"",
                    zryy:"",
                    zxcp:"",
                    khmc:"",
                    khxb:"",
                    nld:"",
                    zy:"",
                    sjhm:"",
                    jtdh:"",
                    gzdh:"",
                    zhld:"",
                    sfcsqx:[],
                    xxdz:"",
                    yzbm:"",
                    khzl:"",
                    khly:"",
                    khxq:"",
                    hydj:"",
                    khbz:"",
                    zzjxsj:"",
                    dhfsj:'',
                    khjf:"",
                    dbd:"",
                },
                tableHeader:[//列表的头
                    {field: 'id',  title: '序列号', sort: true, fixed: 'left',width:120}
                    , {field: 'ldhm', title: '来电号码', sort: true,width:120}
                    , {field: 'khmc', title: '客户名称', sort: true,width:120}
                    , {field: 'khxb', title: '性别', sort: true,width:80,templet:(res)=>{return res.khxb=='1'?'男':'女';}}
                    , {field: 'gtnr', title: '沟通内容', sort: true,width:120}
                    , {field: 'zxcp', title: '质询产品', sort: true,width:120}
                    , {field: 'zzjxsj', title: '最早进线时间',sort: true,width:230,templet: function(res){return formatDateTime(res.zzjxsj);}}
                    , {field: 'gxsj', title: '更新时间',sort: true,width:230,templet: function(res){return formatDateTime(res.gxsj);}}
                    , {field: 'dhfsj', title: '待回访时间',sort: true,width:230,templet: function(res){return formatDateTime(res.dhfsj);}}
                    , {field: 'username', title: '归属员', sort: true,width:120}
                    , {field: 'yggh', title: '归属员工号', sort: true,width:120}
                    , {field: 'sfcsqx', title: '省份/城市/区县', sort: true,width:230,templet: function(res){return getSfcsqx(selectArea_,res.sfcsqx);}}
                    , {field: 'khzl', title: '客户质量', sort: true,width:120}
                    , {field: 'mtly', title: '媒体来源', sort: true,width:120}
                    , {field: 'khly', title: '客户来源', sort: true,width:120}
                    , {field: 'khxq', title: '客户需求', sort: true,width:120}
                    , {field: 'hydj', title: '会员级别', sort: true,width:120}
                    , {field: 'khbz', title: '备注', sort: true,width:120}
                ],
                dhfsjOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        created:function(){
            this.$message_.postTips(this,'','basic-information-system-dict/special-list',{CrmSystemDictSearch: {code_type_name: Object.keys(this.datas)}},null,(response)=>{
                this.datas = response.data.data;
            })
        },
        methods:{
            search:function () {
                this.refreshTable(burl + 'crm-hot-center-hwzx/search-list')
            },
            refreshTable:function (url) {
                layui.use('table',()=>{
                    layui.table.render({
                        elem: "#khList"
                        , url: url //数据接口
                        , toolbar: '' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        , title: ''
                        , where:{CrmHwzxSearch:this.searchDatas}
                        , method:"post"
                        , height: 500
                        , limits: [10, 30, 60, 90]
                        , cols: [this.tableHeader]
                        , page: true //开启分页
                    })
                })
            }
        },
    }
</script>